<template>
	<view class="osmIndex">
		<!-- 头部搜索 -->
		<view class="indexHeader">
			<view class="mzImg">
				<view class="iconfont icon-meizhuang"></view>
			</view>
			<view class="serachIpt">
				<u--input placeholder="请输入关键字" v-model="serachKeyword" prefixIcon="search"
					prefixIconStyle="color: #909399" shape="circle">
				</u--input>
			</view>
			<view class="sImg">
				<view class="iconfont icon-saoyisao"></view>
			</view>
		</view>
		<!-- 轮播图区域 -->
		<view class="indexSwiper">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" autoplay :interval="1500"
					:duration="1000" circular>
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<image src="@/static/images/index/swiper1.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-green">
							<image src="@/static/images/index/swiper2.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-blue">
							<image src="@/static/images/index/swiper3.jpg" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 模块区域 -->
		<view class="indexNavbar">
			<view class="navbarBox">
				<view class="navbarBox-item">
					<view class="navbarBox-itemImg" style="background-color: #6983e3;">
						<image src="@/static/images/index/huazhuangpin-copy.png" mode=""></image>
					</view>
					<view class="">
						肤用化妆品
					</view>
				</view>
				<view class="navbarBox-item">
					<view class="navbarBox-itemImg" style="background-color: #d356d7;">
						<image src="@/static/images/index/huazhuangpin.png" mode=""></image>
					</view>
					<view class="">
						美妆化妆品
					</view>
				</view>
				<view class="navbarBox-item">
					<view class="navbarBox-itemImg" style="background-color: #e36b8a;">
						<image src="@/static/images/index/huazhuangpin1.png" mode=""></image>
					</view>
					<view class="">
						发用化妆品
					</view>
				</view>
				<view class="navbarBox-item">
					<view class="navbarBox-itemImg" style="background-color: #e2b573;">
						<image src="@/static/images/index/iconfonthuazhuangpin.png" mode=""></image>
					</view>
					<view class="">
						其他化妆品
					</view>
				</view>
			</view>
		</view>
		<!-- 秒杀，拼团专区 -->
		<view class="indexActivity">
			<view class="activityBox">
				<view class="activityBox-item">
					<view class="activityBox-header">
						<view class="activityBox-header-left">
							<view class="activityBox-header-left-skill">
								<image src="@/static/images/index/skill.png" mode=""></image>
							</view>
							<view class="activityBox-header-left-text">
								<view class="">秒杀</view>
								<view class="" style="color: #bdbdbd;">限时抢购</view>
							</view>
						</view>
						<view class="activityBox-header-right">
							<view class="">
								<view>00</view>: <view>08</view>: <view>11</view>
							</view>
						</view>
					</view>
					<view class="activityBox-showImg">
						<view class="activityBox-showImg-img">
							<image src="@/static/images/index/11781496.png" mode="" style="width: 30%;"></image>
						</view>
						<view class="activityBox-showImg-img">
							<image src="@/static/images/index/11977200.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="activityBox-item">
					<view class="activityBox-header">
						<view class="activityBox-header-left">
							<view class="activityBox-header-left-skill" style="background-color: #dc916e;">
								<image src="@/static/images/index/dough.png" mode=""></image>
							</view>
							<view class="activityBox-header-left-text">
								<view class="">拼团</view>
								<view class="" style="color: #bdbdbd;">挑剔的你</view>
							</view>
						</view>
						<view class="activityBox-header-right">
							<view class="">
								
							</view>
						</view>
					</view>
					<view class="activityBox-showImg">
						<view class="activityBox-showImg-img">
							<image src="@/static/images/index/11977200.png" mode=""></image>
						</view>
						<view class="activityBox-showImg-img">
							<image src="@/static/images/index/11883975.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 拼团区域（为你推荐） -->
		<view class="indexRecommend" >
			<!-- 推荐模块 -->
			<view class="recommendItem" v-for="item in 5">
				<!-- 顶部展示区域 -->
				<view class="recommendItem-header">
					<image src="@/static/images/index/one.jpg" mode=""></image>
				</view>
				<!-- 标题展示区域 -->
				<view class="recommendItem-content">
					<!-- 标题 -->
					<view class="recommendItem-title">
						<view class="">
							此篇仅限月薪6000女生观看眼睛，围看请绕道
						</view>
					</view>
					<!-- 发布人  粉丝 -->
					<view class="">
						
					</view>
					<!-- 作为新世纪的打工人1月月拿着6000元左右的薪资事、教夜加班0，长时间对着电脑一和手机三工作也是经常的事情 ! 加上偶尔饮食不规律，时不时肌肤还会出现暗沉、闭口图!今天小诗就来分享月薪6000的精致朋人护肤流程 -->
				</view>
			</view>
			
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 搜索关键词
				serachKeyword: '',
				// 屏幕宽度
				creenWidth: '750rpx'
			}
		},
		onLoad() {

		},
		methods: {
			changeNavBar() {
				console.log('click1', e);
			},
			toMyHome() {

			},
			toMyInfo() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss'
</style>
